@extends('home.layout.index')
@section('content')

    <!-- <div class="slide-outer slideAnimation" width="980"> -->
    <div style="width:100%;" id="big_id">
        <div class="content">

                <ul class="imgs">
                @foreach($carousel as $kk=>$vv)
                   <li>
                    <a href="/home/carousellist"><img src="{{$vv['c_pic']}}" style="width:100%;height:325px"></a>

                    <i id="wenzi">{{$vv['c_description']}}</i>
                     <!-- <input type="text" name="" value="" > -->
                    </li>

                @endforeach
                </ul>
                <ul class="nums">
                    <li class="click"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>

            <div class="btn prev"><</div>
            <div class="btn next">></div>
        </div>
    </div>
<script type="text/javascript" src="/h/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(function(){
        // 定义全局的变量  控制图片显示
        var i = 0;
        var time = null;
        _run();
        function _run(){
            if(time == null){
                time = setInterval(function(){
                    _show(i);

                    i++;

                    if(i >= 4){
                        i = 0;
                    }
                },5000);
            }
        }

        function _show(i){
            $('.imgs li').hide();
            console.log(i)
            $('.imgs li').eq(i).show();

            $('.nums li').removeClass('click');

            $('.nums li').eq(i).addClass('click');
        }
        $('.nums li').mouseover(function(){
            // 获取li下标
            i = $(this).index();
            _show(i);
        })

        $('.prev').click(function(){
            console.log(i)
            if(i <= 0){
                i = 4;
            }
            i--;
            _show(i);
        })

        $('.next').click(function(){
            i++;

            if(i >= 4){
                i = 0;
            }
            _show(i);
        })


        $('ul,li,.btn').mouseover(function(){
            $('.btn').show();
            // 清除定时器
            clearInterval(time);
            time = null;
        }).mouseout(function(){
            _run();
            $('.btn').hide();
        })
    })

</script>
    <div id="container">
        <!-- home-section -->
        <div class="home-section">
            <div class="home-content">
                <div class="home-rgt">
                    <!--系统公告开始 -->
                    <div>
                    <h2 class="home-tit">系统公告</h2>
                    <ul class="home-news" style="height:200px;">
                    @foreach($placard_data as $k=>$v)

                        <li><a href="javascript:void(0);" onclick="showAll({{$v['id']}})" target="_self" class="">{{$v['p_title']}}</a><span class="home-hot-tit">{{$v['p_time']}}</span></li>

                    @endforeach
                    </ul>
                    </div>
                    <!-- 系统公告结束 -->
                    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
                    <script type="text/javascript">
                        setInterval(function(){

                            $('.home-news>li').first().slideUp('slow',function(){

                                $('.home-news').append($(this));

                                $('.home-news>li').last().css('display','block');
                            });
                        },5000);
                    </script>
                    <!-- 大家都在搜 -->
                    <h2 class="home-tit">大家都在搜</h2>
                    <ul class="home-hot-lst">
                        @foreach($category as $k=>$v)
                        <li>
                            <a href="/home/answer/create?qid={{$v['id']}}" target="_blank"><span class="home-hot-tag home-hot-clr">{{$v['cate_name']}}</span>
                            <span class="home-hot-tit">{{$v['q_title']}}</span></a>
                        </li>
                        @endforeach
                    </ul>
                    <!-- //大家都在搜 -->
                </div>
                <div class="home-lft">
                <!-- 等你回来答 -->
                <h2 class="home-tit">等你来回答<a href="/home/list?id=1" target="_blank" class="btn-home-more">更多<i></i></a></h2>
                    <div class="home-lst-box">

                        <ul class="home-lst" style="height:700px">
                        @foreach($categorys as $k=>$v)
                            <li>
                            <a href="/home/answer/create?qid={{$v['id']}}" class="home-tab" target="_blank">
                            <span class="home-tab-time">{{ceil(date(time()-strtotime($v['q_time']))/(3600*24))}}天前</span>

                            <div class="user-thumb-box">
                                <div class="user-thumb getUserCard" data-uid="2144810">
                                            @foreach ($userdetails as $kk => $vv)
                                            @if($v['id']==$vv['id'])
                                            <img src="{{$vv['photo']}}" width="100%" height="100%" alt="头像" >
                                            @endif
                                            @endforeach
                                </div>
                            </div>

                            <div  class="home-tab-tit">
                                <p>{{$v['q_title']}}</p>
                            </div>
                            <div class="sort-tag-box">
                                <span class="sort-tag">{{$v['cate_name']}}</span>
                            </div>
                            <span class="home-tab-rgt">{{$v['count']}}回答</span>
                            </a>

                            </li>
                             @endforeach
                        </ul>

                    </div>
                    <script type="text/javascript">
                        setInterval(function(){

                            $('.home-lst>li').first().slideUp('slow',function(){

                                $('.home-lst').append($(this));

                                $('.home-lst>li').last().css('display','block');
                            });
                        },8000);
                    </script>
                    <!-- //等你回来答 -->
                </div>
            </div>
        </div>
        <!-- home-section2 -->
        <div class="home-section2">
            <div class="home-content">
                <div class="home-rgt">
                    <h2 class="home-tit">排行榜</h2>
                    <div class="home-rank-box">
                        <div class="recommend-card-v3">
                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="323px" height="17px" xml:space="preserve">
                            <defs>
                            <pattern id="water" width=".25" height="1" patterncontentunits="objectBoundingBox">
                            <path fill="#fff" d="M0.25,1H0c0,0,0-0.659,0-0.916c0.083-0.303,0.158,0.334,0.25,0C0.25,0.327,0.25,1,0.25,1z"></path>
                            </pattern>
                            <g id="eff3">
                            <rect class="water-fill" fill="url(#water)" x="-11.6438" y="0" width="800" height="60" opacity=".1">
                            <animate attributetype="xml" attributename="x" from="-200" to="0" repeatcount="indefinite" dur="10s"></animate>
                            </rect>
                            <rect class="water-fill" fill="url(#water)" y="2" width="800" height="58" opacity="0.1" x="-264.067">
                            <animate attributetype="xml" attributename="x" from="-400" to="0" repeatcount="indefinite" dur="13s"></animate>
                            </rect>
                            </g>
                            </defs>
                            <use xlink:href="#eff3" opacity="1" style="mix-blend-mode:normal;"></use>
                            </svg>
                        </div>
                        <div class="home-rank-tit">
                            积分排行榜
                        </div>
                        @foreach($score as $k=>$v)
                        <ul class="home-rank-lst">
                        <div class="home-rank-tab"  style="height:35px;">

                                <div class="user-thumb-box" style="height:35px;">
                                    <a href="/home/userdetail/{{$v['id']}}"><div class="user-thumb getUserCard" data-uid="13854097" >
                                        <img src="{{$v['photo']}}" width="100%" height="100%" alt="头像">
                                    </div></a>
                                </div>
                                <div class="user-name-box">

                                    <span class="user-name weekUserName" data-uid="13854097">{{$v['nickname']}}</span>
                                    <div class="home-rank-txt">
                                        积分: {{$v['score']}}
                                    </div>
                                </div>

                            </div>
                        </ul>
                        @endforeach
                    </div>
                </div>
                <div class="home-lft">
                    <!-- 问问专家 -->
                    <div class="home-lft-card">
                        <h2 class="home-tit">问问专家</h2>
                        <div class="recommend-card">
                            <div class="recommend-card-v1">
                                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="323px" height="30px" xml:space="preserve">
                                <defs>
                                <pattern id="water" width=".25" height="1.1" patterncontentunits="objectBoundingBox">
                                <path fill="#fff" d="M0.25,1H0c0,0,0-0.659,0-0.916c0.083-0.303,0.158,0.334,0.25,0C0.25,0.327,0.25,1,0.25,1z"></path>
                                </pattern>
                                <g id="eff">
                                <rect fill="url(#water)" x="-254.135" y="0" width="1200" height="120" opacity="0.1">
                                <animate attributetype="xml" attributename="x" from="-300" to="0" repeatcount="indefinite" dur="10s"></animate>
                                </rect>
                                <rect fill="url(#water)" y="5" width="1600" height="125" opacity="0.1" x="-229.882">
                                <animate attributetype="xml" attributename="x" from="-400" to="0" repeatcount="indefinite" dur="13s"></animate>
                                </rect>
                                </g>
                                </defs>
                                <use xlink:href="#eff" opacity="1" style="mix-blend-mode:normal;"></use>
                                </svg>
                            </div>
                            <div class="recommend-card-main">
                                <div class="recommend-card-tit">
                                    问问专家
                                </div>
                                <div class="recommend-card-txt">
                                    在知也问问答题贡献最多用户
                                </div>
                                @foreach($q_user as $k=>$v)
                                <a href="/home/userdetail/{{$v['id']}}" class="user-thumb"><img src="{{$v['photo']}}" width="100%" height="100%" alt="头像">
                                </a>
                                <div class="recommend-card-tit2">

                                    <a href="/home/userdetail/{{$v['id']}}">{{$v['nickname']}}</a>
                                </div>
                                <div class="recommend-card-txt2">{{$v['description']}}</div>
                                @endforeach
                                <div class="recommend-card-txt3">
                                    “擅长领域”
                                </div>
                                <div class="tags">
                                    <span class="tags-tab">{{$catename}}</span>
                                </div>
                                <a href="/home/question" target="_blank" class="btn-ask-help">向Ta求助</a>
                            </div>
                            <div class="recommend-card-bot">
                                &nbsp;专家火热报名中
                            </div>
                        </div>
                    </div>
                    <!-- //问问专家 -->
                    <!-- 问问达人 -->
                    <div class="home-lft-card">
                        <h2 class="home-tit">问问达人</h2>
                        <div class="recommend-card">
                            <div class="recommend-card-v2">
                                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="323px" height="30px" xml:space="preserve">
                                <defs>
                                <pattern id="water" width=".25" height="1.1" patterncontentunits="objectBoundingBox">
                                <path fill="#fff" d="M0.25,1H0c0,0,0-0.659,0-0.916c0.083-0.303,0.158,0.334,0.25,0C0.25,0.327,0.25,1,0.25,1z"></path>
                                </pattern>
                                <g id="eff2">
                                <rect fill="url(#water)" x="-575.592" y="0" width="1200" height="120" opacity="0.1">
                                <animate attributetype="xml" attributename="x" from="-600" to="0" repeatcount="indefinite" dur="13s"></animate>
                                </rect>
                                <rect fill="url(#water)" y="5" width="1600" height="125" opacity="0.1" x="-173.558">
                                <animate attributetype="xml" attributename="x" from="-800" to="0" repeatcount="indefinite" dur="16s"></animate>
                                </rect>
                                </g>
                                </defs>
                                <use xlink:href="#eff2" opacity="1" style="mix-blend-mode:normal;"></use>
                                </svg>
                            </div>
                            <div class="recommend-card-main">
                                <div class="recommend-card-tit">
                                    问问达人
                                </div>
                                <div class="recommend-card-txt">
                                    知也问问最热心用户
                                </div>
                                @foreach($a_user as $k=>$v)
                                <a href="/home/userdetail/{{$v['id']}}" class="user-thumb"><img src="{{$v['photo']}}" width="100%" height="100%" alt="头像">
                                </a>
                                <div class="recommend-card-tit2">
                                    <a href="/home/userdetail/{{$v['id']}}">{{$v['nickname']}}</a>
                                </div>
                                <div class="recommend-card-txt2">{{$v['description']}}</div>
                                @endforeach
                                <div class="recommend-card-txt3">
                                    “擅长领域”
                                </div>
                                <div class="tags">
                                    <span class="tags-tab">网页游戏</span>
                                </div>
                                <a href="/home/question" target="_blank" class="btn-ask-help">向Ta求助</a>
                            </div>
                            <div class="recommend-card-bot">
                                &nbsp;达人火热报名中
                            </div>
                        </div>
                    </div>
                    <!-- //问问达人 -->
                </div>
            </div>
        </div>
    </div>
    <script>
    var _gtag = _gtag || {};
    _gtag = {
        static_files_prefix:'/sf',
        qId: '',
        cateId: '',
        userId: '10',
        clbUid: '-1',
        orig: 253,
        userHead: false ? '' : 'http://cache.soso.com/wenwen/i/default-thumb.png',
        que_title: '',
        siteBaseUrl: '/',
        loginStateUrl: '/login/loginState',
        popLoginUrl: '/login/popLogin',
        loginOutUrl: '/login/logout',
        isLogin : false,
        search_url : '/s/?w=',
        ask_url : '/z/AskQuestionConfirm.e?sp=0&sp=S',
        ajax: {
            smartbox: 'http://sugg.search.wenwen.sogou.com/service-search/ajax/smartbox'
        },
        phase: '${wenwenPage.phase}'
    };
    </script>
    <script>
    function showAll(placardid)
    {
        $.get(("/")+placardid,{},function(p_content)
        {
             //页面层
                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['360px', '190px'], //宽高
                    content: p_content
                });
        });
    };

    </script>

<style>
        .layui-layer-rim
        {
            background:url('/layer/skin/default/111.jpg');
            background-repeat:no-repeat;
            background-size:100%;
            border-color:#fff;
        }
    </style>
@endsection